<template>
  <div class="Search" >

      <input type="text" v-model="keyword" class="location" />
    <input type="text" v-model="location" class="location" style="top: 60px"/>
    <el-button @click="getLocation">确定</el-button>
    <baidu-map :scroll-wheel-zoom="true" :center="map.center">
      <bm-overview-map anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :isOpen="true"></bm-overview-map>
      <bm-city-list anchor="BMAP_ANCHOR_TOP_LEFT" ></bm-city-list>
      <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true" :locationSuccess="loc"></bm-geolocation>
        <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
      <bm-view class="map"></bm-view>
      <bm-local-search
        :keyword="searchKeyword"
        :auto-viewport="true"
        :location="searchLocation"
      ></bm-local-search>
    </baidu-map>
  </div>
</template>

<script>
export default {
  name: "Search",
  data() {
    return {
      location: "",
      searchLocation: "",
      keyword: "",
      searchKeyword: "",

      map: {
          center: "合肥市",
      }
    };
  },

  methods: {
    getLocation(){
      this.searchLocation=this.location;
      this.searchKeyword=this.keyword;
    },
    loc(){
      console.log("定位成功")
    }
  },
};
</script>

<style scoped>
.Search {
  width: 100%;
  height: 100%;
}
.map {
  width: 100%;
  height: 700px;
}

.location {
  width: 300px;
  height: 30px;
  outline: none;
  background: white;
  position: absolute;
  left: 500px;
  top: 20px;
  border: 0;
  box-shadow: 2px 2px 2px rgb(236, 235, 235), -2px -2px 2px rgb(236, 235, 235),
    -2px 2px 2px rgb(236, 235, 235), 2px -2px 2px rgb(236, 235, 235);
  z-index: 10;
}
button {
  display: inline-block;
  
  
  position: absolute;
  left: 860px;
  top: 32px;
  z-index: 10;
}
</style>

